<template>
  <div class="page-bd">
    <div class="form-content">
      <el-form
        label-width="120px"
        :model="formData"
        :rules="rules"
        ref="formData"
        size="medium"
        label-position="left"
        status-icon
        class="choose-main-protocol-form"
      >
        <el-form-item label="签约主体" prop="merchantId">
          <el-radio-group v-model="formData.merchantId" @change="handleChange">
            <el-radio v-for="(item, index) in merchantList" :key="item.id" :label="item.id">{{
              item.businessName
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div class="main-info" v-if="cur_merchant">
        <div class="main-name">
          甲方：
        </div>
        <ul class="main-info-box">
          <li>
            <div class="name">商户名称</div>
            <div class="bd">
              {{ cur_merchant.businessName }}
            </div>
          </li>
          <li>
            <div class="name">营业执照注册号</div>
            <div class="bd">
              {{ cur_merchant.businessLicenseCode }}
            </div>
          </li>
          <li>
            <div class="name">经营范围</div>
            <div class="bd">
              {{ cur_merchant.businessScope }}
            </div>
          </li>
          <li>
            <div class="name">注册地址</div>
            <div class="bd">
              {{ cur_merchant.registeredAddress }}
            </div>
          </li>
        </ul>
      </div>

      <div class="action-box">
        <el-button type="primary" plain @click="goBackStep">
          <i class="el-icon-arrow-left el-icon--left"></i>上一步
        </el-button>
        <el-button type="primary" size="medium" @click="submitForm('formData')"
          >下一步<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  props: ['oldMerchantId'],
  data() {
    return {
      formData: {
        merchantId: ''
      },
      rules: {
        merchantId: [{ required: true, message: '请选择签约主体', trigger: 'change' }]
      },
      merchantList: [],
      cur_merchant: null
    };
  },
  created() {
    this.formData.merchantId = this.oldMerchantId;
    this.fetchPaymentMerchantConfigList();
  },
  methods: {
    fetchPaymentMerchantConfigList() {
      API.fetchGet('/valueAdded/getPaymentMerchantConfigList.do').then(res => {
        this.merchantList = res.data;
        if (this.oldMerchantId) {
          this.cur_merchant = res.data.find(item => item.id === this.oldMerchantId);
        } else {
          this.cur_merchant = this.merchantList[0]
          this.formData.merchantId = this.merchantList[0].id
        }
      });
    },
    handleChange(val) {
      this.cur_merchant = this.merchantList.find(item => item.id === val);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('setFormData', 'merchantId', this.formData.merchantId);
          this.$emit('setFormData', 'cur_merchant', this.cur_merchant);
          this.$emit('goNextStep');
        } else {
          return false;
        }
      });
    },
    goBackStep() {
      this.$emit('setFormData', 'merchantId', this.formData.merchantId);
      this.$emit('goBackSetp');
    }
  }
};
</script>

<style lang="less" scoped>
.action-box {
  margin-top: 40px;
}

.main-info {
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  padding: 20px;
  display: flex;
  margin-left: 120px;
  margin-top: 10px;
  .main-name {
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: flex-start;
    width: 55px;
    font-weight: bold;
  }
  .main-info-box {
    flex: 1;
    li {
      display: flex;
      font-size: 14px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .name {
        width: 130px;
        display: flex;
        align-items: flex-start;
        color: #474747;
      }
      .bd {
        flex: 1;
        color: #333333;
      }
    }
  }
}
</style>
